<!DOCTYPE html>
<html lang="zh-cn">
<!-- vertical-align属性测试 -->

<head>
	<meta charset="utf-8" />
	<title>测试</title>
	<style>
		.block {
			display: inline-block;
			width: 16px;
			height: 16px;
			background-color: cadetblue;
		}


/* 垂直居中对齐 */
.d1{
	height: 200px;
	background-color: chocolate;
	text-align: center;
	line-height: 200px;
}

.d2{
	display: inline-block;
	height: 100px;
	width: 100px;
	background-color:cyan;
	vertical-align:middle;
}

	</style>
</head>

<body>
	<div style="height: 100px;background-color: darkgrey;">
		<span style="background-color: darksalmon;">这是一幅<div class="block"></div>abc位于段落中的图像。</span>
	</div>
	<div class="d1">
		<div class="d2">
		
		</div>
	</div>


</body>

</html>